import React, { memo,useState,useCallback } from "react";
import { useSelector,useDispatch } from "react-redux";

import "./index.scss";
import radioActions from 'store/action/djradio'

import WYThemeHeaderNormal from "components/theme-header-normal";
import WYRadioRankingCover from "components/radio-ranking-cover";
import WYPagination from "components/pagination";

const WYRadioRank = memo(function (props) {
  // data
  const [currentPage, setcurrentPage] = useState(1);

  // redux
  const { radios, total } = useSelector((state) => ({
    radios: state.getIn(["djradio", "radios"]),
    total: state.getIn(["djradio", "total"]),
  }));
  const  dispatch = useDispatch()
  // 其他逻辑
  const changePage = useCallback((idx) => {
    setcurrentPage(idx)
    dispatch(radioActions.getRadioRank({offset:currentPage}))
  }, [currentPage,dispatch]);

  return (
    <div className="wy-radio-rank">
      <WYThemeHeaderNormal title="电台排行榜" />
      <div className="rank-item">
        {radios.length > 0 &&
          radios.map((item) => (
            <WYRadioRankingCover key={item.id} info={item} />
          ))}
      </div>
      <WYPagination
        onPageChange={changePage}
        total={total}
        currentPage={currentPage}
      />
    </div>
  );
});

export default WYRadioRank;
